<template>
  <div>
    <van-tabs color="#409eff" @click="onClick">
      <van-tab
        v-for="(item, index) in newslist"
        :key="index"
        :title="item.name"
      >
        <ul v-for="(item2, index2) in news" :key="index2" class="news">
          <router-link
            :to="{ path: '/detail', query: { articleId: item2.articleId } }" tag="li"
          >
          <li>
            <img :src="item2.bannerImgUrl" />
            <div class="textbox">
              <h5>{{ item2.title }}</h5>
              <p>{{ item2.articleSource }}</p>
              <p>{{ item2.sendTime }}</p>
            </div>
          </li>
          </router-link>
        </ul>
      </van-tab>
    </van-tabs>
    <div style="height: 50px"></div>
  </div>
</template>

<script>
import { getNewslist } from "../api/api";
import { getNews } from "../api/api";
export default {
  name: "Newslist",
  data() {
    return {
      newslist: [],
      news: [],
    };
  },
  created() {
    //   tab列表
    getNewslist().then((res) => {
      this.newslist = res.rows;
    });
    // 新闻详情--默认显示头条
    getNews("头条").then((res2) => {
      this.news = res2.rows;
    });
  },
  methods: {
    onClick(name, title) {
      getNews(title).then((res2) => {
        // console.log(res2);
        this.news = res2.rows;
      });
    },
  },
};
</script>
<style lang="less" scoped>
.clearfix::after,
.clearfix::before {
  content: "";
  display: table;
  /* 这句话会发出BFC，BFE有清除浮动的作用 */
  clear: both;
}
.news {
  width: 100%;
  height: 100px;
  box-sizing: border-box;
  padding: 8px;
  border-bottom: 1px solid #ddd;
  li {
    width: 100%;
    height: 90px;
  }
  img {
    float: left;
    width: 38%;
    height: 100%;
  }
}
.textbox {
  width: 59%;
  height: 100%;
  float: left;
  margin-left: 7px;
  box-sizing: border-box;
  padding-left: 5px;
  h5 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  p {
    font-size: 12px;
    color: #999;
    word-break: break-all;
    margin-top: 12px;
  }
}
</style>